<template>
  <div class="demo">
    <FloatButton
      class="cart-button"
      icon="pen"
      bind-counter="goods-cart"
      message-point-position="righttop"
      message-point-draggable
      @click="showCofirm()"
    ></FloatButton>
    <MessagePoint
      bind-counter="goods-cart"
      clearable
      draggable
      @clear="onMessageClear"
    ></MessagePoint>
    <GoodsList bind-counter="goods-cart" show-add-cart :data="data" />
    <AddCartEffect></AddCartEffect>
  </div>
</template>
<script setup lang="ts">
import AddCartEffect from "@/components/a/AddCartEffect.vue";
import FloatButton from "@/components/b/FloatButton.vue";
import MessagePoint from "@/components/a/MessagePoint.vue";
import GoodsList from "@/components/b/GoodsList.vue";
import { confirm } from "@/hooks/useDialog";
import { ref } from "vue";
const showCofirm = () => {
  confirm({
    message: "确定要这样吗？",
    title: "温馨提示",
    showCancel: true,
    closeOnClickModal: false,
    success() {
      console.log("成功");
    },
    fail() {
      console.log("失败");
    },
    complete() {
      console.log("完成");
    },
  });
};

const thumb =
  "https://img.alicdn.com/imgextra/i2/118478229/O1CN01VyCDgW2AevvBTY4g5_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp";
const data = ref<GoodsData[]>([
  {
    title:
      "苏迪雅免烫短袖衬衫高端新疆棉夏季衬衣男女同款企业工装定制logo红红火火",
    price: 2999,
    delPrice: 3999,
    storeName: "Ikun大本营",
    thumb:
      "https://img.alicdn.com/imgextra/i2/118478229/O1CN01VyCDgW2AevvBTY4g5_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp",
  },
  {
    title:
      "阁兰秀春夏泡泡袖大花印花风衣中长款宽松外套减龄大衣女的方法风格阿道夫人是个梵蒂冈",
    price: 2560,
    storeName: "Ikun大本营",
    subInfo: "月销100",
    thumb:
      "https://img.alicdn.com/imgextra/i4/120536821/O1CN01V3I9pw20G4Vs2Rc4z_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp",
  },
  {
    title: "N·COU24春新款高端设计感新中式国风女神范气质时尚套装",
    price: 324,
    delPrice: 3999,
    thumb:
      "https://img.alicdn.com/imgextra/i4/1490730040/O1CN01f2bkJz1CAMe8HASHR_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp",
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
  {
    title: "8848钛金手机 钛合金机身",
    price: 2999,
    delPrice: 3999,
    thumb,
  },
]);
const onMessageClear = () => {
  console.log("清除");
};
</script>
<style lang="scss">
.demo {
  .cart-button {
    right: 50px;
    bottom: 50px;
  }
}
</style>
